<!-- 20200528-->
<template>
    <div class="app-container">
      <Form
        v-if="showSearch"
        v-model:formData="searchInfo"
        :formItems="formItems"
      >
        <template #footer>
          <div style="text-align: left">
            <el-button size="small" icon="Search" type="primary" @click="goSearch"
              >搜索</el-button
            >
            <el-button size="small" icon="Refresh" @click="resetSearch"
              >重置</el-button
            >
          </div>
        </template>
      </Form>
      <h3></h3>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5"> </el-col>
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="resetSearch"
        ></right-toolbar>
      </el-row>
      <el-button
        type="primary"
        icon="Plus"
        size="small"
        @click="add"
        v-hasPermi="['member:mobileBlack:add']"
        >添加</el-button
      >
      <!--  -->
      <el-button
        v-if="checkList.length"
        :disabled="!checkList.length"
        type="danger"
        icon="Delete"
        size="small"
        @click="delMore"
        v-hasPermi="['member:mobileBlack:del']"
        >批量删除</el-button
      >
      <!--  v-hasPermi="['api:v1:delMobileBlank']" -->
      <h3></h3>
      <x-table
        isShowCheckBox
        @selection-change="selectionChange"
        v-loading="tableLoading"
        :tableData="info.items"
        :propList="propList"
      >
        <!-- v-hasPermi="['api:v1:delChannelGroup']" -->
        <template #op="scope">
          <el-button
            size="small"
            type="primary"
            link
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['member:mobileBlack:del']"
            >删除</el-button
          >
          <!--  v-hasPermi="['api:v1:delMobileBlank']" -->
        </template>
      </x-table>
      <pagination
        v-show="totalCount > 0"
        :total="totalCount"
        v-model:page="searchInfo.page"
        v-model:limit="searchInfo.pageSize"
        @pagination="getInfo"
        :autoScroll="false"
      />
      <el-dialog
        title="添加号码黑名单"
        v-model="isShowDialog"
        width="500px"
        center
      >
        <!--  -->
        <el-form ref="form" :model="form" :rules="rules" label-width="108px">
          <el-form-item label="手机号" prop="mobile">
            <el-input
              type="textarea"
              v-model="form.mobile"
              placeholder="请输入手机号,多个手机号换行处理"
              clearable
              :rows="4"
              size="small"
              style="width: 260px"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              :rows="4"
              v-model="form.remark"
              placeholder="请输入备注"
              clearable
              size="small"
              style="width: 260px"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="isShowDialog = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { propList, formItems } from "./config";
  import { getList, add, del } from "@/api/platform/mobileBlack";
  export default {
    name: "platmobileBlackindex",
    data() {
      return {
        formItems,
        showSearch: true,
        checkList: [],
        form: {},
        rules: {
          mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        },
        tableLoading: true,
        propList,
        info: {},
        totalCount: 0,
        isShowDialog: false,
        searchInfo: {
          page: 1,
          pageSize: 10,
          created_at: [],
          // created_at: this.getTimeFilterDefault(true),
        },
      };
    },
    computed: {},
    created() {
      this.init();
    },
    mounted() {},
    methods: {
      init() {
        this.getInfo();
      },
      selectionChange(val) {
        this.checkList = val;
      },
      delMore() {
        const ids = this.checkList.map((item) => item.id);
        this.$modal
          .confirm("是否确认删除？")
          .then(function () {
            return del(ids);
          })
          .then(() => {
            this.getInfo();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      async getInfo() {
        this.tableLoading = true;
        const { data } = await getList(this.searchInfo);
        this.tableLoading = false;
        console.log(data);
        this.info = data;
        this.totalCount = data.total;
      },
      handleDelete(row) {
        const id = row.id;
        this.$modal
          .confirm("是否确认删除？")
          .then(function () {
            return del(id);
          })
          .then(() => {
            this.getInfo();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      goSearch() {
        // 重置时间
        this.getInfo();
      },
      resetSearch() {
        this.searchInfo = this.$options.data.call(this).searchInfo;
        this.searchInfo.created_at = [];
        //   this.searchInfo.created_at = this.getTimeFilterDefault(true);
        this.getInfo();
      },
      add() {
        this.form = {};
        this.isShowDialog = true;
      },
      confirm() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const { mobile, remark } = this.form;
            const mobileArr = mobile.split("\n");
            const { data } = await add({ mobile: mobileArr, remark });
            this.isShowDialog = false;
            const str =
              "成功数:" +
              data.success_mobile.length +
              "失败数：" +
              data.fail_mobile.length;
            this.$alert(str, "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.getInfo();
              },
            });
          }
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped></style>
  